<div class="album-info">   
    <!-- <div class="form-test">
        <form [formGroup]="formValues" (ngSubmit)="submit()">
            <label>
                name:
                <input type="text" formControlName="name" name="name">
            </label>
            <label>
                name:
                <app-sizer formControlName="size"></app-sizer>
            </label>
            <button>提交</button>
        </form>
    </div> -->
    <!-- {{size}}
    <app-sizer [(ngModel)]="size" (ngModelChange)="sizeChange($event)" [disabled]="true"></app-sizer> -->
    <div class="main">
        <!-- <button xmBtn (click)="checked = !checked">toggle {{checked}}</button>
        <p>
            {{currentCheck}}
        </p>
        <app-check-group [(ngModel)]="currentCheck">
            <label app-checkbox *ngFor="let item of checkOpts" [value]="item.value">{{item.label}}--{{item.value}}</label> 
        </app-check-group> -->
        <ng-container *ngIf="albumInfo else skeleton">
            <div class="info">
                <div class="thumbnail">
                    <img [src]="albumInfo.cover" [alt]="albumInfo.albumTitle" class="cover">
                    <div class="back-cover"></div>
                </div>
                <div class="contents">
                    <h1>
                        <app-tag xmColor="#5fa8fc" class="tag">{{1}}</app-tag>
                        <span>{{ albumInfo.albumTitle }}</span>
                    </h1>
                    <div class="record">
                        <div class="rate">
                            <div class="star-wrap">
                                <app-rate (changed)="rateChanged($event)" disabled></app-rate>
                            </div>
                            <span class="score">{{score}}分</span>
                        </div>
                        <div class="play-count">
                            <i appIcon="headset" class="icon"></i>
                            <span>{{albumInfo.playCount | numberFormat }}</span>
                        </div>
                    </div>
                    <div class="metas">
                        <app-tag class="meta" *ngFor="let meta of albumInfo.metas">{{meta.metaDisplayName}}</app-tag>
                    </div>
                    <div class="actions">
                        <button xmBtn class="btn" (click)="playAll()" appRipples>
                            <i appIcon="play1" class="icon"></i>
                            播放全部
                        </button>
                    </div>
                </div>
            </div>
            <div class="intro">
                <article appToggleMore="360" (initTrueHeight)="articleHeight=$event" [isFull]="moreState.full"
                    [content]="albumInfo.richIntro" [innerHTML]="albumInfo.richIntro | safeContent"></article>
                <div class="more-arrow" (click)="toggleMore()" *ngIf="articleHeight > 360">
                    <div class="blur" [hidden]="moreState.full"></div>
                    <span>{{this.moreState.label }}</span>
                    <i [appIcon]="this.moreState.icon" class="icon"></i>
                </div>
            </div>
            <div class="playlist">
                <table>
                    <thead>
                        <tr>
                            <th><label app-checkbox [ngModel]="isCheckedAll()"
                                    (ngModelChange)="checkedAllChange($event)"></label>
                            </th>
                            <th class="item-name">曲目</th>
                            <th>播放量</th>
                            <th>创建时间</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let track of tracks;trackBy:trackByTracks">
                            <td class="item-checkbox"><label app-checkbox [ngModel]="isChecked(track.trackId)"
                                    (ngModelChange)="checkedChange($event, track)"></label></td>
                            <td [class]="itemCls(track.trackId)">
                                <span class="prefix number">{{ track.index }}</span>
                                <i appIcon="'play1'" (click)="toggleTrack(track, 'play')" class="prefix icon icon-play"></i>
                                <i appIcon="'pause'" (click)="toggleTrack(track, 'pause')" class="prefix icon icon-pause"></i>
                                <div class="prefix icon icon-playing"><i></i><i></i><i></i><i></i></div>
                                <span>{{ track.title }}</span>
                            </td>
                            <td>
                                <i appIcon="'headset'" class="icon"></i>
                                <span>{{ track.playCount | numberFormat }}万</span>
                            </td>
                            <td>{{ track.createDateFormat }}</td>
                        </tr>
                        <tr class="last"></tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <th><label app-checkbox [ngModel]="isCheckedAll()"
                                    (ngModelChange)="checkedAllChange($event)"></label>
                            </th>
                            <th class="item-name">
                                <button appRipples xmBtn [disabled]="!selectTracks.length" [xmCircle]="true" (click)="play(true)">播放选中歌曲</button>
                                <button appRipples class="btn-add" xmBtn [disabled]="!selectTracks.length" [xmCircle]="true" (click)="play(false)">添加到播放列表</button>
                            </th>
                        </tr>
                    </tfoot>
                </table>
                <div class="page-wrap">
                    <app-pagination class="page" [total]="total" [pageNum]="trackParams.pageNum"
                        [pageSize]="trackParams.pageSize" (changed)="changePage($event)">
                    </app-pagination>
                </div>
            </div>
        </ng-container>
        <ng-template #skeleton>
            <svg role="img" aria-labelledby="Loading interface..." viewBox="0 0 400 130"
                preserveAspectRatio="xMidYMid meet">
                <title>Loading interface...</title>
                <rect x="0" y="0" width="400" height="130" clip-path="url(#k8vk4h3v2qo)"
                    style="fill: url(&quot;#j1umtr4lgr&quot;);"></rect>
                <defs>
                    <clipPath id="k8vk4h3v2qo">
                        <rect x="0" y="0" rx="3" ry="3" width="250" height="10"></rect>
                        <rect x="20" y="20" rx="3" ry="3" width="220" height="10"></rect>
                        <rect x="20" y="40" rx="3" ry="3" width="170" height="10"></rect>
                        <rect x="0" y="60" rx="3" ry="3" width="250" height="10"></rect>
                        <rect x="20" y="80" rx="3" ry="3" width="200" height="10"></rect>
                        <rect x="20" y="100" rx="3" ry="3" width="80" height="10"></rect>
                    </clipPath>
                    <linearGradient id="j1umtr4lgr">
                        <stop offset="0.866418" stop-color="#f0f0f0" stop-opacity="1">
                            <animate attributeName="offset" values="-3; 1" dur="2s" repeatCount="indefinite"></animate>
                        </stop>
                        <stop offset="1.86642" stop-color="#e0e0e0" stop-opacity="1">
                            <animate attributeName="offset" values="-2; 2" dur="2s" repeatCount="indefinite"></animate>
                        </stop>
                        <stop offset="2.86642" stop-color="#f0f0f0" stop-opacity="1">
                            <animate attributeName="offset" values="-1; 3" dur="2s" repeatCount="indefinite"></animate>
                        </stop>
                    </linearGradient>
                </defs>
            </svg>

        </ng-template>

    </div>
    <!-- 相关专辑 -->
    <div class="side">
        <ng-container *ngIf="anchor">
            <div class="card">
                <div class="card-head">
                    <h3>专辑主播</h3>
                </div>
                <div class="card-body">
                    <div class="anchor-info">
                        <div class="anchor-head">
                            <div class="photo">
                                <img [appImgLazy]="anchor.anchorCover" [alt]="anchor.anchorName" />
                            </div>
                            <span class="name">{{ anchor.anchorName }}</span>
                        </div>
                        <ul class="anchor-stats">
                            <li>曲目：{{ anchor.anchorTracksCount }}</li>
                            <li>专辑：{{ anchor.anchorAlbumsCount }}</li>
                            <li>粉丝：{{ anchor.anchorFansCount | numberFormat }}万</li>
                        </ul>
                        <p class="anchor-intro">
                            简介：
                            {{ anchor.personalIntroduction }}
                        </p>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-head">
                    <h3>TA的专辑</h3>
                </div>
                <div class="card-body">
                    <div class="albums">
                        <div class="album-item" *ngFor="let item of anchor.anchorAlbumList"
                            [routerLink]="'/album/' + item.albumId">
                            <div class="thumbnail">
                                <img [appImgLazy]="item.cover" [alt]="item.albumTitle">
                            </div>
                            <div class="content">
                                <div class="title">{{ item.albumTitle }}</div>
                                <span class="count">
                                    <i appIcon="headset" class="icon"></i>{{ item.playCount | numberFormat }}万
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </ng-container>

        <div class="card">
            <div class="card-head">
                <h3>相关推荐</h3>
            </div>
            <div class="card-body">
                <div class="albums">
                    <div class="album-item" *ngFor="let item of relateAlbums" [routerLink]="'/album/' + item.id">
                        <div class="thumbnail">
                            <img [appImgLazy]="'//imagev2.xmcdn.com/' + item.coverPath" [alt]="item.title">
                        </div>
                        <div class="content">
                            <div class="title">{{ item.title }}</div>
                            <span class="count">
                                <i appIcon="headset" class="icon"></i>{{ item.playCount | numberFormat }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
